<template>
	<picker-view v-if="visible" class="picker-view" :indicator-style="indicatorStyle" :value="defaultValue" @change="bindChange">
		<picker-view-column>
			<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
		</picker-view-column>
		<picker-view-column v-if="fields === 'month' || fields === 'day'">
			<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
		</picker-view-column>
		<picker-view-column v-if="fields === 'day'">
			<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
		</picker-view-column>
		<picker-view-column>
			<view class="item" v-for="(item,index) in 24" :key="index">{{item}}时</view>
		</picker-view-column>
		<picker-view-column>
			<view class="item" v-for="(item,index) in 60" :key="index">{{item}}分</view>
		</picker-view-column>
		<!-- <picker-view-column>
			<view class="item" v-for="(item,index) in 60" :key="index">{{item}}秒</view>
		</picker-view-column> -->
	</picker-view>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				default: ""
			},
			fields: {
				type: String,
				default: "day"
			},
			startDate: {
				type: String,
				default: "1970/01/01"
			},
			endDate: {
				type: String,
				default: "2099/12/31"
			}
		},
		data() {
			return {
				years: [],
				months: [1,2,3,4,5,6,7,8,9,10,11,12],
				days: [],
				defaultValue: [],
				indicatorStyle: `height: 50px;`,
				visible: false
			}
		},
		mounted() {
			let startDate = new Date(this.dateCompatible(this.startDate));
			let endDate = new Date(this.dateCompatible(this.endDate));
			for (let i = startDate.getFullYear(); i <= endDate.getFullYear(); i++) {
				this.years.push(i)
			}
			let defaultDate = this.value ? new Date(this.dateCompatible(this.value)) : new Date();
			let defaultYear = defaultDate.getFullYear();
			if(this.fields === "year"){
				this.defaultValue = [this.getIndex(this.years, defaultYear)];
			}else if(this.fields === "month"){
				let defaultMonth = defaultDate.getMonth() + 1;
				this.defaultValue = [this.getIndex(this.years, defaultYear), this.getIndex(this.months, defaultMonth)];
			}else if(this.fields === "day"){
				let defaultMonth = defaultDate.getMonth() + 1;
				let defaultDay = defaultDate.getDate();
				let defaultHours = defaultDate.getHours();
				let defaultMinutes = defaultDate.getMinutes();
				let defaultSeconds = defaultDate.getSeconds();
				for (let i = 1; i <= this.getMonthDays(defaultYear, defaultMonth); i++) {
					this.days.push(i)
				}
				this.defaultValue = [
					this.getIndex(this.years, defaultYear), 
					this.getIndex(this.months, defaultMonth), 
					this.getIndex(this.days, defaultDay), 
					defaultHours,
					defaultMinutes
				];
			}
			this.visible = true
		},
		methods: {
			getValue(){
				if(this.fields === "year"){
					return this.years[this.defaultValue[0]];
				}else if(this.fields === "month"){
					let year = this.years[this.defaultValue[0]];
					let month = this.months[this.defaultValue[1]];
					return year + "-" + (month < 10 ? "0" + month : month)
				}else if(this.fields === "day"){
					let year = this.years[this.defaultValue[0]];
					let month = this.months[this.defaultValue[1]];
					let day = this.days[this.defaultValue[2]];
					return year + "-" + (month < 10 ? "0" + month : month) + "-" + (day < 10 ? "0" + day : day) + " " + (this.defaultValue[3] < 10 ? "0" + this.defaultValue[3] : this.defaultValue[3]) + ":" + (this.defaultValue[4] < 10 ? "0" + this.defaultValue[4] : this.defaultValue[4]);
				}
			},
			bindChange: function(e) {
				let val = e.detail.value
				if(this.fields === "year"){
					this.defaultValue = [val[0]];
				}else if(this.fields === "month"){
					this.defaultValue = [val[0], val[1]];
				}else if(this.fields === "day"){
					let day = val[2];
					if(val[0] !== this.defaultValue[0] || val[1] !== this.defaultValue[1]){
						let arr = []
						for (let i = 1; i <= this.getMonthDays(this.years[val[0]], this.months[val[1]]); i++) {
							arr.push(i)
						}
						this.days = arr
						if(day > this.days.length - 1){
							day = this.days.length - 1
						}
					}
					this.defaultValue = [val[0], val[1], day, val[3], val[4]];
				}
			},
			dateCompatible(val){
				let re = new RegExp("-", "gi");
				return String(val).replace(re, "/")
			},
			getIndex(arr, val){
				for (var i = 0; i < arr.length; i++) {
					if(arr[i] === val){
						return i
					}
				}
				return 0
			},
			getMonthDays(year, month){
				let y = Number(year)
				let m = Number(month)
				let day30 = [4,6,9,11]
				let day31 = [1,3,5,7,8,10,12]
				for (var i = 0; i < day30.length; i++) {
					if(day30[i] === m){
						return 30
					}
				}
				for (var i = 0; i < day31.length; i++) {
					if(day31[i] === m){
						return 31
					}
				}
				if (y % 4 == 0 && y % 100 != 0 || y % 400 == 0) {
				    return 29
				} else {
				    return 28
				}
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.picker-view {
		width: 100%;
		height: 500rpx;
		margin-top: 20rpx;
		.item {
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
	}
</style>